<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
	integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
	crossorigin="anonymous">
<link rel="stylesheet"
	href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.loginForm {
	/*边框高度*/
	height: 300px;
	/*边框宽度*/
	width: 500px;
	/*边框颜色*/
	border: #4d4d4d solid 1px;
	/*边框圆角*/
	border-radius: 4px;
	/*阴影 水平方向，竖直方向，模糊距离*/
	box-shadow: 5px 5px 5px #4d4d4d;
	/*上边界距离*/
	margin-top: 100px;
	/*左边界距离：自动*/
	margin-left: auto;
	/*右边界距离：自动*/
	margin-right: auto;
	/*用户名、密码间距*/
	padding: 20px 40px;
}

/*将用户登录置于中间*/
.loginForm h2 {
	text-align: center;
}

/*修改button属性*/
.button {
	text-align: center;
	vertical-align: middle;
}
</style>
</head>
<body
	style="background-image: url('https://img95.699pic.com/xsj/09/j8/ob.jpg!/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast'); background-size: cover;">
	<div class="loginForm">
		<h2 style="color: black;">用户登录</h2>

		<font color="red"> <%-- 提示信息--%> <span id="message">${msg}</span></font>
		<form action="${pageContext.request.contextPath }/login.action"
			method="post" class="form-horizontal">
			<div class="form-group">
				<label for="usercode" class="col-sm-2 control-label">账号</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="usercode"
						placeholder="请输入账号" name="usercode" required="required">
				</div>
			</div>
			<div class="form-group">
				<label for="password" class="col-sm-2 control-label">密码</label>
				<div class="col-sm-10">
					<input type="password" class="form-control" id="password"
						placeholder="请输入密码" name="password" required="required">
				</div>
			</div>
			<div class="form-group">
				<label for="userAuthority" class="col-sm-2 control-label">权限</label>
				&nbsp;&nbsp;&nbsp; 管理员<input type="radio" name="userAuthority"
					value="0" required="required" /> 普通用户<input type="radio"
					name="userAuthority" value="1" /> <br>
			</div>
			<div class="button">
				<input type="submit" class="btn btn-primary" value="登 录" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="button" class="btn btn-primary" value="注册"
					data-toggle="modal" data-target="#createuser" />
			</div>

		</form>
	</div>

	<div id="createuser" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<button class="close" data-dismiss="modal">
						<span>&times;</span>
					</button>
				</div>
				<div class="modal-title">
					<h1 class="text-center">注册</h1>
				</div>
				<div class="modal-body">
					<form class="form-group" id="new_user_form">



						<div class="form-group">
							<label for="">账号</label> <input class="form-control" type="text"
								placeholder="请输入账号" id="userCode" name="userCode">
						</div>

						<div class="form-group">
							<label for="">密码</label> <input class="form-control"
								type="password" placeholder="至少6位字母或数字" id="userPassword"
								name="userPassword">
						</div>
						<div class="form-group">
							<label for="">用户名</label> <input class="form-control" type="text"
								placeholder="请输入名称" id="userName" name="userName">
						</div>


						<label for="">性别</label> 男<input type="radio" name="gender"
							value="男" required="required" /> 女<input type="radio"
							name="gender" value="女" />
						<div class="text-right">
							<button class="btn btn-primary" type="button"
								onclick="createUser()">提交</button>
							<button class="btn btn-danger" data-dismiss="modal">取消</button>
						</div>



						<a href="" data-toggle="modal" data-dismiss="modal"
							data-target="#login">已有账号？点我登录</a>
					</form>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		function clearUser() {
			$("#userCode").val("");
			$("#userName").val("");
			$("#userPassword").val("");
			$("#gender").val("");

		}

		function createUser() {
			$.post("${pageContext.request.contextPath }/create.action", $(
					"#new_user_form").serialize(), function(data) {
				//alert($("#new_user_form").serialize())
				if (data == "OK") {
					alert("用户注册成功！");
					window.location.reload();
				} else {
					alert("用户注册失败(账号已存在,换个试试!)！");
					window.location.reload();
				}
			});
		}
	</script>

</body>
</html>

























